<template>
    <div class="layout">
        <el-container>
            <el-aside class="aside">
                <div class="title">博客后台管理系统</div>
                <el-scrollbar>
                    <el-menu>
                        <el-menu-item>首页</el-menu-item>
                        <el-sub-menu index="1">
                            <template #prefix>
                                <el-icon><HomeFilled /></el-icon>文章
                            </template>
                            <el-menu-item-group>
                                <el-menu-item index="2-1">文章列表</el-menu-item>
                                <el-menu-item index="2-2">新增文章</el-menu-item>
                                <el-menu-item index="2-3">标签管理</el-menu-item>
                                <el-menu-item index="2-4">分类管理</el-menu-item>
                            </el-menu-item-group>
                        </el-sub-menu>
                        <el-sub-menu index="2">
                            <template #title>
                            <el-icon><message /></el-icon>说说
                            </template>
                            <el-menu-item-group>
                                <el-menu-item index="2-1">说说列表</el-menu-item>
                                <el-menu-item index="2-2">发布说说</el-menu-item>
                            </el-menu-item-group>
                        </el-sub-menu>
                        <el-menu-item>相册列表</el-menu-item>
                        <el-menu-item>用户管理</el-menu-item>
                        <el-menu-item>个人中心</el-menu-item>
                        <el-sub-menu index="3">
                            <template #title>
                            <el-icon><message /></el-icon>网站管理
                            </template>
                            <el-menu-item-group>
                                <el-menu-item index="2-1">博客网站信息管理</el-menu-item>
                                <el-menu-item index="2-2">背景管理</el-menu-item>
                                <el-menu-item index="2-3">留言管理</el-menu-item>
                                <el-menu-item index="2-4">友联管理</el-menu-item>
                            </el-menu-item-group>
                        </el-sub-menu>
                    </el-menu>
                </el-scrollbar>
            </el-aside>
            <el-container class="container">
                <el-header class="header">Header</el-header>
                <el-main>Main</el-main>
            </el-container>
        </el-container>
    </div>
</template>

<script setup>

</script>

<style lang="scss">
.layout {
   
    .aside {
        width: 200px;
        height: 100vh;
        overflow: hidden;
        background-color: #002140;
        .title{
            height: 50px;
            text-align: center;
            line-height: 50px;
            font-size: 18px;
            color:#1890FF;
        }
        .el-sub-menu{
            color:#A5ACB3;
            background-color: #002140;
        }
        .el-menu-item{
            color:#A5ACB3;
            background-color: #002140;
        }
    }

    .container {
        .header {
            height: 50px;
            background-color: skyblue;
        }
    }
}
</style>
